<template>
  <div ref="charts" :style="{ height: '500px', margin: 'auto' }"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      resize: null,
    };
  },
  destroyed() {
    removeEventListener("resize", this.resize);
  },
  mounted() {
    let chartDom = this.$refs.charts;
    var myChart = echarts.init(chartDom);
    let option = this.options;
    myChart.setOption(option);
    this.resize = () => {
      myChart.resize();
    };
    addEventListener("resize", this.resize);
  },
};
</script>

<style >
</style>